<template>
  <div class="video-control-container">
    <!-- 放大 -->
    <div
      class="big"
      :class="arrowIcon == 8 && 'active'"
      @click.stop="dataSource.type == 0 && startVideoControl(8)"
    >
      <div class="plus"></div>
    </div>

    <!-- 缩小 -->
    <div
      class="small"
      :class="arrowIcon == 9 && 'active'"
      @click.stop="dataSource.type == 0 && startVideoControl(9)"
    >
      <div class="minus"></div>
    </div>

    <!-- 聚焦 -->
    <div
      class="focus"
      @click.stop="dataSource.type == 0 && startVideoControl(11)"
      title="远焦距"
    ></div>

    <!-- 向上 -->
    <div
      class="up"
      :class="arrowIcon == 0 && 'active'"
      @click.stop="dataSource.type == 0 && startVideoControl(0)"
    ></div>

    <!-- 向下 -->
    <div
      class="down"
      :class="arrowIcon == 1 && 'active'"
      @click.stop="dataSource.type == 0 && startVideoControl(1)"
    ></div>

    <!-- 向左 -->
    <div
      class="left"
      :class="arrowIcon == 2 && 'active'"
      @click.stop="dataSource.type == 0 && startVideoControl(2)"
    ></div>

    <!-- 向右 -->
    <div
      class="right"
      :class="arrowIcon == 3 && 'active'"
      @click.stop="dataSource.type == 0 && startVideoControl(3)"
    ></div>
  </div>
</template>

<script>
// import { setVideoIntdata } from "@/api/security-app.js";
import {
  getVideoToken,
  startVideoControl,
  stopVideoControl,
  addPreset,
  clearPreset,
  movePreset,
} from "@/api/monitor_video.js";
export default {
  props: {
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arrowIcon: null,
      index: "",
    };
  },
  mounted() {},
  methods: {
    //设置预置点
    async addPreset() {
      let { deviceSerialNumber, channelNumber, intdata, accessToken, id } =
        this.dataSource;
      if (intdata) {
        await this.clearPreset();
      }
      let params = {
        accessToken,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
      };
      addPreset(params).then((res) => {
        let { data } = res;
        this.index = data?.index || "";
        setVideoIntdata({ vedioId: id, intdata: this.index })
          .then((res) => {
            this.$message.success("操作成功");
          })
          .catch((_) => {
            this.$message.error("操作失败，请稍后重试");
          });
      });
    },

    //清楚预置点
    async clearPreset() {
      let { deviceSerialNumber, channelNumber, intdata } = this.dataSource;
      let params = {
        accessToken,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
        index: intdata,
      };
      clearPreset(params).then((res) => {});
    },

    //调用预置点
    async movePreset() {
      let { deviceSerialNumber, channelNumber, accessToken } = this.dataSource;
      let params = {
        accessToken,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
        index: this.index,
      };
      movePreset(params).then((res) => {
        console.log(res);
      });
    },

    //开始云台控制【开始云台控制之后必须先调用停止云台控制接口才能进行其他操作】
    async startVideoControl(direction) {
      this.arrowIcon = direction;
      let { deviceSerialNumber, channelNumber, accessToken } = this.dataSource;
      let params = {
        accessToken,
        direction,
        deviceSerial: deviceSerialNumber,
        channelNo: channelNumber,
        speed: 1,
      };
      startVideoControl(params).then((res) => {
        setTimeout((_) => {
          this.stopVideoControl(params);
        }, 1000);
      });
    },

    //停止云台控制
    stopVideoControl(params = {}) {
      return new Promise((resolve, reject) => {
        stopVideoControl(params)
          .then((res) => {
            setTimeout(() => {
              this.$message.success({
                content: "操作成功",
                key: "updatable",
                duration: 1,
              });
            }, 100);
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
  },
  destroyed() {
    this.arrowIcon = null;
    this.index && this.movePreset();
  },
};
</script>

<style lang="less" scoped>
.video-control-container {
  height: 100%;
  width: 100%;
  background: url("https://jszhgd.cn/static/pc/security-app/control/bg.png");
  background-size: 100% 100%;
  position: relative;
  .big {
    cursor: pointer;
    width: 56px;
    height: 36px;
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    background: url("https://jszhgd.cn/static/pc/security-app/control/big.png");
    background-size: 100% 100%;
    .flex();
    align-items: center;
    justify-content: center;
    .plus {
      height: 18px;
      width: 18px;
      background: url("https://jszhgd.cn/static/pc/security-app/control/plus.png");
      background-size: 100% 100%;
    }
    &.active {
      background: url("https://jszhgd.cn/static/pc/security-app/control/big_active.png");
      background-size: 100% 100%;
    }
  }
  .small {
    cursor: pointer;
    width: 52px;
    height: 54px;
    position: absolute;
    right: 5px;
    top: 26px;
    background: url("https://jszhgd.cn/static/pc/security-app/control/small.png");
    background-size: 100% 100%;
    .flex();
    align-items: center;
    justify-content: center;
    .minus {
      height: 18px;
      width: 18px;
      background: url("https://jszhgd.cn/static/pc/security-app/control/minus.png");
      background-size: 100% 100%;
    }
    &.active {
      background: url("https://jszhgd.cn/static/pc/security-app/control/small_active.png");
      background-size: 100% 100%;
    }
  }
  .focus {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: url("https://jszhgd.cn/static/pc/security-app/control/focus.png");
    background-size: 100% 100%;
  }

  .up {
    cursor: pointer;
    width: 21px;
    height: 15px;
    background: url("https://jszhgd.cn/static/pc/security-app/control/up.png");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    &.active {
      background: url("https://jszhgd.cn/static/pc/security-app/control/up_active.png");
      background-size: 100% 100%;
    }
  }

  .down {
    cursor: pointer;
    width: 21px;
    height: 15px;
    background: url("https://jszhgd.cn/static/pc/security-app/control/down.png");
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    &.active {
      background: url("https://jszhgd.cn/static/pc/security-app/control/down_active.png");
      background-size: 100% 100%;
    }
  }

  .left {
    cursor: pointer;
    width: 15px;
    height: 21px;
    background: url("https://jszhgd.cn/static/pc/security-app/control/left.png");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    &.active {
      background: url("https://jszhgd.cn/static/pc/security-app/control/left_active.png");
      background-size: 100% 100%;
    }
  }

  .right {
    cursor: pointer;
    width: 15px;
    height: 21px;
    background: url("https://jszhgd.cn/static/pc/security-app/control/right.png");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    &.active {
      background: url("https://jszhgd.cn/static/pc/security-app/control/right_active.png");
      background-size: 100% 100%;
    }
  }
}
</style>
